/**
 * @description  : 内管实地核查-零售户-预警信息
 * @descriptionDetail : 预警信息
 * @copyright    : 浙江烟草
 * @author       : mwq
 * @create       : 2022-12-05 10:46:52
 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <view class="tabsBottom">
        <u-sticky>
          <u-cell-group class="sticky-header">
            <u-cell-item icon="calendar" title="开始/结束日期" :value="rangeDate" :arrow="true" @tap="dateRange=true">
            </u-cell-item>
          </u-cell-group>
        </u-sticky>
        <retail-head :licNo="licNo" style="margin-top:55px;padding:5px;"></retail-head>
        <me-table
          :i="0"
          :index="0"
          :load-data="loadData"
          :init-load="true" 
          ref="mescrollItem0"
        > 
          <u-card
            :show-foot="false"
            margin="20rpx"
            
            box-shadow="#e5e5e5 0px 0px 50px"
            slot-scope="d"
            @click="handlerOrderList(d.data)"
          >
            <template #head>
              <view class="headStyle">
                <u-row>
                  <u-col>
                    <view style="color:#333333;font-weight:bold;float: left;font-size:32rpx;">
                      {{ d.data.warnName }}
                    </view>
                    <view style="color:#999999;float: right;font-size:24rpx;">
                      {{ d.data.warnStatus }}
                    </view>
                  </u-col>
                </u-row>
              </view>
            </template>
            <template #body>
              <u-row>
                <u-col span="10">
                  <u-row>
                    <u-col>
                      <view style="color:#999999;font-size:28rpx;">
                        {{ d.data.warnDate }}
                      </view>
                    </u-col>
                    <u-col>
                      <view style="color:#999999;font-size:28rpx;">
                        {{ d.data.warnDesc }}
                      </view>
                    </u-col>
                  </u-row>
                </u-col>
                <u-col span="2">
                  <view style="float:right;">
                    <u-icon name="arrow-right" size="38"></u-icon>
                  </view>
                </u-col>
              </u-row>
            </template>
          </u-card>
        </me-table>
      </view>
    </view>
    <u-calendar mode="range" max-date="2099-12-31" v-model="dateRange" @change="handlerSearchDate"></u-calendar>
    <!-- 预警详情 -->
    <u-popup mode="bottom" height="100%" border-radius="16" v-model="detailShow">
      <theme-navbar
        :is-white="false"
        title="预警详情"
        :custom-back="() => detailShow=false"
        style="z-index: 99999"
      >
      </theme-navbar>
      <u-card
        margin="20rpx"
        box-shadow="#e5e5e5 0px 0px 50px"
        :show-head="false"
      >
        <template #body>
          <u-row>
            <u-col>
              <view style="color:#333333;font-weight:bold;float: left;font-size:32rpx;">
                {{ warnList.warnName }}
              </view>
            </u-col>
            <u-col>
              <view style="color:#999999;font-size:28rpx;">
                {{ warnList.warnDate }}
              </view>
            </u-col>
            <u-col>
              <view style="color:#999999;font-size:28rpx;">
                {{ warnList.warnDesc }}
              </view>
            </u-col>
          </u-row>
        </template>
      </u-card>
      <u-card
        margin="20rpx"
        box-shadow="#e5e5e5 0px 0px 50px"
        :show-head="false"
      >
        <template #body>
          <u-row>
            <u-col span="3" style="color:#333333;font-weight:bold;font-size:30rpx;">
              客户名称：
            </u-col>
            <u-col span="9" style="color:#333333;font-size:30rpx;">
              {{ warnList.companyName }}
            </u-col>
            <u-col span="3" style="color:#333333;font-weight:bold;font-size:30rpx;">
              许可证号：
            </u-col>
            <u-col span="9" style="color:#333333;font-size:30rpx;">
              {{ warnList.custNo }}
            </u-col>
            <u-col span="3" style="color:#333333;font-weight:bold;font-size:30rpx;">
              营销中心：
            </u-col>
            <u-col span="9" style="color:#333333;font-size:30rpx;">
              {{ warnList.saleCenterName }}
            </u-col>
            <u-col span="3" style="color:#333333;font-weight:bold;font-size:30rpx;">
              客户经理：
            </u-col>
            <u-col span="9" style="color:#333333;font-size:30rpx;">
              {{ warnList.custMgrName }}
            </u-col>
          </u-row>
        </template>
      </u-card>
    </u-popup>
  </view>
</template>

<script> 
import meTable from '@/components/me-table.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import retailHead from "./components/retail-head.vue"
import checkService from "@/service/check/check.service"
import {dateUtils,} from "@/common/util"
export default {
  components: { 
    meTable,retailHead,
  },
  mixins: [MescrollMoreMixin,],
  
  data() {
    return {
      user: this.$storage.get(this.$rp.common.USER),
      dateRange: false,
      rangeDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())) + "至" + dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      startDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())),
      endDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      background: {
        background: "#fff",
      },
      headStyle: {
        fontWeight: 600,
      },
      detailShow: false,  // 显示预警详情
      licNo:'',      
      warnList:{},
      warnEndDate:dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      warnBeginDate:dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())),
    };
  },
  onLoad(option) {
    this.licNo = option.licNo;
  },
  methods: {
    loadData(page) {
      return checkService.getWarnRetailInfoById(page.num, page.size,{licNo: this.licNo,warnBeginDate: this.warnBeginDate,warnEndDate: this.warnEndDate,})
    },
    // 日期区间查询条件
    handlerSearchDate(d) {
      this.warnBeginDate = d.startDate;
      this.warnEndDate = d.endDate;
      this.rangeDate = d.startDate + '至' + d.endDate;
      this.$refs["mescrollItem0"].refresh(); 
    },
    // 预警详情
    handlerOrderList(detail) {
      this.detailShow = true;
      this.warnList = detail;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #FFF;
}
.sticky-header {
  position: fixed;
  /* #ifdef H5-DINGDING  */
  top: 0px;
  /* #endif */
  /* #ifndef H5-DINGDING  */
  top: 45px;
  /* #endif */
  width: 100%;
  z-index: 999;
}
/deep/ .u-tabbar__content__item__text {
  font-size: 15px;
}
.headStyle{
    height: 35rpx;
}
</style>
